<template>
  <MyLayout class="my-dialog-panel"
            :class="classes"
            :style="styles"
            :north="{height:headerHeight}"
            :south="{height:footerHeight}">
    <template v-slot:north>
      <div ref="header" class="my-dialog-panel__header">
        <div class="my-dialog-panel__title">
          <span v-if="icon" class="my-dialog-panel__icon">
            <!-- icon 插槽 -->
            <slot name="icon">
            </slot>
          </span>
          <!-- title 插槽 -->
          <slot name="title">
            {{title}}
          </slot>
        </div>
        <div class="my-dialog-panel__tool">
          <slot name="tool"></slot>
          <i v-if="minimizable" @click="handleMinimized" class="icon-minimize my-icon icon-window-min" ></i>
          <i v-if="maximizable && !maximized" @click="handleMaximized(true)" class="icon-maximize my-icon icon-window-normal"></i>
          <i v-if="maximizable && maximized" @click="handleMaximized(false)" class="icon-window my-icon icon-window-max"></i>
          <i v-if="closable" @click="handleClose" class="icon-close my-icon icon-window-close" ></i>
        </div>
      </div>

    </template>
    <div class="my-dialog-panel__main" :class="classes">
      <slot></slot>
    </div>
    <template v-if="footer" v-slot:south>
      <div class="my-dialog-panel__footer">
        <slot name="footer">
          <el-button type="primary"
                    size="medium"
                    @click="handleSubmit"
                    :loading="submitLoading">{{submitText}}
          </el-button>
          <el-button size="medium" @click="handleCancel">{{cancelText}}</el-button>
        </slot>
      </div>
    </template>
  </MyLayout>
</template>

<script>
import MyLayout from '../layout'

export default {
  name: 'index',
  components: {
    MyLayout
  },
  props: {
    width: Number,
    height: Number,
    theme: String,
    title: String,
    icon: Object,
    footer: Boolean,
    submitText: {
      type: String,
      default: '确定'
    },
    submitLoading: Boolean,
    cancelText: {
      type: String,
      default: '取消'
    },
    headerHeight: {
      type: Number,
      default: 46
    },
    footerHeight: {
      type: Number,
      default: 54
    },
    closable: {
      type: Boolean,
      default: true
    },
    beforeClose: Function,
    maximizable: Boolean,
    maximized: Boolean,
    minimizable: Boolean,
    minimized: Boolean
  },
  data() {
    return {}
  },
  computed: {
    styles() {
      return {
        width: this.width ? `${this.width}px` : 'auto',
        height: this.height ? `${this.height}px` : 'auto'
      }
    },
    classes() {
      return {
        [`is-${this.theme}`]: !!this.theme,
        'is-has-height': !!this.width
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit')
    },
    handleCancel() {
      this.$emit('cancel')
    },
    handleClose() {
      if (this.beforeClose) {
        this.beforeClose().then(() => {
          this.$emit('close')
        })
      } else {
        this.$emit('close')
      }
    },
    handleMaximized(maximized) {
      this.$emit('update:maximized', maximized)
    },
    handleMinimized() {
      this.$emit('update:minimized', true)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
